<template>
  <div class="cmdy-look">
    <el-container>
      <el-header>
        <el-breadcrumb>
          <el-breadcrumb-item>商品维护</el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>查看商品</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main>
        <h1 class="prdt-title">商品概况</h1>
        <el-form label-width="130px" class="demo-ruleForm">
          <el-form-item v-for="(item, index) in formData" :key="index" :label="item.label">
            <span>{{item.value}}</span>
            <span class="lookfor" v-if="item.label == '商品适用门店组：'" @click="lookforClick">查看</span>
          </el-form-item>
        </el-form>
        <el-dialog
          :show-close="false"
          :visible.sync="dialogVisible"
          width="70%"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          :before-close="handleClose">
          <div class="dialog-title">
            <el-row type="flex" align="middle">
              <el-col :span="4">
                <span>供应商：</span>
                <span>四方精创</span>
              </el-col>
              <el-col :span="7">
                <span>适用门店组名称：</span>
                <span>礼品券适用酒店</span>
              </el-col>
              <el-col :span="5">
                <span>适用门店总数：</span>
                <span>150家</span>
              </el-col>
              <el-col :span="2" :offset="6">
                <el-button type="primary" size="small" @click="handleClose">关闭</el-button>
              </el-col>
            </el-row>
            <el-table :data="dialogData" border style="width: 100%; margin-top: 30px">
              <el-table-column prop="order" label="序号" width="80" align="center"></el-table-column>
              <el-table-column prop="shopName" label="门店名称" width="120" align="center"></el-table-column>
              <el-table-column prop="shopAddress" label="门店地址" align="center"></el-table-column>
              <el-table-column prop="shopTel" label="门店电话" width="120" align="center"></el-table-column>
              <el-table-column prop="shopStatus" label="门店营业情况" width="120" align="center"></el-table-column>
              <el-table-column prop="shopCoord" label="经纬度" width="120" align="center"></el-table-column>
              <el-table-column prop="shopOpen" label="营业时间" width="220" align="center"></el-table-column>
            </el-table>
            <div class="doalig-footer">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="prev, pager, next, sizes, jumper"
                :total="400"
              ></el-pagination>
            </div>
          </div>
        </el-dialog>
        <div class="prdt-residu">
          <h1 class="prdt-title">商品库存</h1>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column fixed prop="order" label="序号" width="100" align="center"></el-table-column>
            <el-table-column prop="subTime" label="提交时间" align="center"></el-table-column>
            <el-table-column prop="storeNum" label="库存编码" align="center"></el-table-column>
            <el-table-column prop="yhqType" label="优惠券类型" align="center"></el-table-column>
            <el-table-column prop="residueNum" label="添加库存数量" align="center"></el-table-column>
            <el-table-column fixed="right" label="库存详情" align="center">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-dialog
          :show-close="false"
          :visible.sync="dialogVisible2"
          width="70%"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          :before-close="handleClose">
          <div class="dialog-title">
            <el-row type="flex" align="middle">
              <el-col :span="4">
                <span>库存编码：</span>
                <span>xxxx</span>
              </el-col>
              <el-col :span="7">
                <span>提交时间：</span>
                <span>2020-01-01 12:12:12</span>
              </el-col>
              <el-col :span="5">
                <span>添加库存数量</span>
                <span>15</span>
              </el-col>
              <el-col :span="2" :offset="6">
                <el-button type="primary" size="small" @click="handleClose">关闭</el-button>
              </el-col>
            </el-row>
            <el-table :data="residuDialogData" border style="width: 100%; margin-top: 30px">
              <el-table-column prop="order" label="序号" width="80" align="center"></el-table-column>
              <el-table-column prop="QRcode" label="二维码" align="center"></el-table-column>
              <el-table-column prop="prdtStatus" width="100" align="center"></el-table-column>
            </el-table>
            <div class="doalig-footer">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="prev, pager, next, sizes, jumper"
                :total="400"
              ></el-pagination>
            </div>
          </div>
        </el-dialog>
        </div>
        <div class="prdt-opera">
          <h1 class="prdt-title">商品操作记录</h1>
          <el-table :data="operaData" border style="width: 100%">
            <el-table-column prop="operTime" label="操作时间" width="250" align="center"></el-table-column>
            <el-table-column prop="operAccount" label="操作账号" width="200" align="center"></el-table-column>
            <el-table-column prop="operProject" label="操作项" width="200" align="center"></el-table-column>
            <el-table-column prop="other" label="其他" align="center"></el-table-column>
          </el-table>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: [
        {
          label: "商品ID：",
          value: "wxxxxxnnn"
        },
        {
          label: "商品供应商：",
          value: "四方精创"
        },
        {
          label: "商品适用门店组：",
          value: "礼品券适用门店"
        }
      ],
      tableData: [
        {
          order: 1,
          subTime: "2020-01-02 12:12:12",
          storeNum: "xxxxxx",
          yhqType: "二维码",
          residueNum: 10
        }
      ],
      operaData: [
        {
          operTime: "2020-01-03 12:12:12",
          operAccount: "sssssdad",
          operProject: "审核不通过",
          other: "jkdjkdfjkdfjk"
        }
      ],
      dialogData: [
        {
          order: 1,
          shopName: "kasjldjals",
          shopAddress:
            "深圳市南山区科技中二路深圳软件园120楼402、深圳软件园(2期)13栋302室",
          shopTel: "13800138000",
          shopStatus: "正常",
          shopCoord: "118.24, 39.56",
          shopOpen: "09:00:00 - 21:59:59"
        }
      ],
      residuDialogData: [
        {
          order: 1,
          QRcode: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          prdtStatus: "未售"
        },
        {
          order: 2,
          QRcode: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          prdtStatus: "已售"
        }
      ],
      dialogVisible: false,
      dialogVisible2: false,
      currentPage: 1
    };
  },
  methods: {
    // 商品概况查询
    lookforClick() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          this.dialogVisible = false;
        })
        .catch(_ => {});
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 商品库存查询
    handleClick(val) {
      console.log(val, 222)
      this.dialogVisible2 = true;
    }
  }
};
</script>

<style scoped>
.cmdy-look .el-header {
  height: 60px;
  border-bottom: 1px solid #f3f3f3;
}
.el-breadcrumb {
  height: 60px;
  line-height: 60px;
}
.main-header {
  text-align: center;
  align-items: center;
  display: flex;
}
.main-header >>> .el-input {
  width: 200px;
  margin-right: 20px;
}
.main-content {
  margin: 40px;
}
.el-form-item {
  margin: 0 !important;
}
.prdt-title {
  font-size: 22px;
  margin: 20px 0;
}
.prdt-residu {
  margin: 80px 0;
}
.lookfor {
  color: #409eff;
  display: inline-block;
  margin-left: 30px;
  cursor: pointer;
}
.cmdy-look /deep/ .el-dialog__header {
  padding: 0;
}
.doalig-footer {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
</style>